<template>
    <el-skeleton v-if="typeof editableTabs.list!='object'" :rows="5" animated />
    
        <el-tabs v-else
 v-model="editableTabsValue"
 type="card"
 class="demo-tabs"
 closable
>

 <el-tab-pane
   v-for="item in editableTabs.list"
   :key="item.caseId"
   :label="item.caseId"
   :name="item.caseId"
 >
  <pre style="margin: 0;">
实际输出 =
<el-input v-model.lazy="item.stdout" :rows="2"
type="textarea" placeholder="Please input" />
  </pre>
 </el-tab-pane>
</el-tabs>

 
  
</template>

<script  setup>
import { ref,watch,reactive} from 'vue'
import { mainStore } from '@/store';
import { JudgeCaseResult } from '@/pojo/entity';
import {getCurrentInstance} from 'vue';

const instance = getCurrentInstance();


// // 创建一个响应式数据来触发组件的重新渲染
// const refreshComponent = ref(false);

    const store=mainStore()
    //获取题目号对应判题结果

  let tabIndex = 1
  const editableTabsValue = ref('1')
  const editableTabs=reactive({
    list:store.JudgeCaseResultMap.get("1")
  });
 

  watch(store.JudgeCaseResultMap,(v)=>{
      editableTabs.list=store.JudgeCaseResultMap.get("1")
      instance.proxy.$forceUpdate();

      })

</script>

<style>

</style>

